<template>
    <div>
         <!-- 面包屑区域 -->
        <Button class="margin-bottom-10 margin-right-5" type="info" v-if="fromData.status==1" @click="printWaybill" >打印运单</Button>
        <Button class="margin-bottom-10 margin-right-5" type="info" v-if="fromData.shipperCountrycode!=fromData.receiverCountrycode" @click="printWayInvoce" >打印发票</Button>

        <Button class="margin-bottom-10 margin-right-5" v-if="fromData.systemSource == 1" type="warning" @click="queryApi" >API参数</Button>
        <Button class="margin-bottom-10 margin-right-5" v-if="fromData.systemSource == 1" type="success" @click="queryRate" >测算参数</Button>
        <Button class="margin-bottom-10 margin-right-5" v-if="fromData.status==0" type="success" @click="importExcel" >上传附件</Button>

        <div>
            <Row>
                <Col span="16" style="padding-right:7px">
                    <!-- 运单信息 -->
                    <div class="newbase-box">
                        <div class="newbase-title">运单信息</div>
                        <div>
                            <Form class="clearfix padding-right-15 margin-top-5" :label-width="160" >
                            <Row>
                                <Col span="12">
                                    <FormItem label="承运商" >
                                        <div >{{fromData.carrier || '--'}}</div>
                                    </FormItem>
                                </Col>
                                <Col span="12">
                                    <FormItem label="承运商服务" >
                                        <div >{{fromData.serviceCode || '--'}}</div>
                                    </FormItem>
                                </Col>
                                <Col span="12">
                                    <FormItem label="运单号码/关联单号">
                                        <div >{{fromData.trackingCode || '--'}}/{{fromData.parcelNo || '--'}}</div>
                                    </FormItem>
                                </Col>
                                <Col span="12">
                                    <FormItem label="组织" >
                                        <div >{{getOrgName(fromData.organizationId) || '--'}}</div>
                                    </FormItem>
                                </Col>
                                <Col span="12">
                                    <FormItem label="是否取消" >
                                        <div >{{fromData.cancel == 0 ? '否' : '是'}}</div>
                                    </FormItem>
                                </Col>
                                <Col span="12">
                                    <FormItem label="预估费用" >
                                        <div >{{fromData.rate || '--'}}</div>
                                    </FormItem>
                                </Col>
                                <Col span="12">
                                    <FormItem label="包裹尺寸">
                                        <div>{{fromData.parcelLength}} * {{fromData.parcelWidth}} * {{fromData.parcelHeight}} {{fromData.parcelLengthUnit}}</div>
                                    </FormItem>
                                </Col>
                                <Col span="12">
                                    <FormItem label="包裹重量" >
                                        <div >{{fromData.parcelWeight}} {{fromData.parcelWeightUnit}}</div>
                                    </FormItem>
                                </Col>
                                <Col span="12">
                                    <FormItem label="物流状态" >
                                        <div >{{getTrackingStatus(fromData.trackingStatus)}}</div>
                                    </FormItem>
                                </Col>
                                <Col span="12">
                                    <FormItem label="包裹数量" >
                                        <span>1</span>
                                    </FormItem>
                                </Col>
                                <Col span="12">
                                    <FormItem label="保价服务" >
                                        <div>{{fromData.valuation == 0 ? '否' : '是'}}</div>
                                    </FormItem>
                                </Col>
                                <Col span="12">
                                    <FormItem label="签名服务">
                                        <div >{{fromData.signfor ? fromData.signfor == 0 ? '否' : '是' : '否'}}</div>
                                    </FormItem>
                                </Col>
                                </Row>
                            </Form>

                        </div>
                    </div>
                    <Row class="margin-top-15">
                        <!-- 发货 收货信息 -->
                        <Col span="12">
                            <div class="newbase-box" style="margin-right:7px;height:390px">
                            <div class="newbase-title">发件信息</div>
                                <Form class="clearfix padding-right-15 margin-top-5" :label-width="160">
                                    <FormItem label="发货方Code">
                                        <div >{{fromData.shipperCode || '--'}}</div>
                                    </FormItem>
                                    <FormItem label="邮编" >
                                        <div >{{fromData.shipperZipcode || '--'}}</div>
                                    </FormItem>
                                    <FormItem label="发货方" >
                                        <div >{{fromData.shipperContactName || '--'}}</div>
                                    </FormItem>
                                    <FormItem label="联系电话" >
                                        <div >{{fromData.shipperContactPhone || '--'}}</div>
                                    </FormItem>
                                    <FormItem label="国家" >
                                        <div >{{fromData.shipperCountrycode || '--'}}</div>
                                    </FormItem>
                                    <FormItem label="州" >
                                        <div >{{fromData.shipperState || '--'}}</div>
                                    </FormItem>
                                    <FormItem label="城市" >
                                        <div >{{fromData.shipperCity || '--'}}</div>
                                    </FormItem>
                                    <FormItem label="详细地址" >
                                        <div >{{fromData.shipperAddressLine1 || '--'}}</div>
                                    </FormItem>
                            </Form>
                            </div>
                        </Col>
                        <Col span="12">
                            <div class="newbase-box" style="margin-left:8px;height:390px">
                                <div class="newbase-title">收件信息</div>
                                <Form class="clearfix padding-right-15 margin-top-5" :label-width="160">
                                    <FormItem label="收货方">
                                        <div >{{fromData.receiverContactName || '--'}}</div>
                                    </FormItem>
                                    <FormItem label="邮编" >
                                        <div >{{fromData.receiverZipcode || '--'}}</div>
                                    </FormItem>
                                    <FormItem label="联系电话" >
                                        <div >{{fromData.receiverContactPhone || '--'}}</div>
                                    </FormItem>
                                    <FormItem label="国家" >
                                        <div >{{fromData.receiverCountrycode || '--'}}</div>
                                    </FormItem>
                                    <FormItem label="州" >
                                        <div >{{fromData.receiverState || '--'}}</div>
                                    </FormItem>
                                    <FormItem label="城市" >
                                        <div >{{fromData.receiverCity || '--'}}</div>
                                    </FormItem>
                                    <FormItem label="详细地址" >
                                        <div >{{fromData.receiverAddressLine1 || '--'}}</div>
                                    </FormItem>
                                    <FormItem label="详细地址2" >
                                        <div >{{fromData.receiverAddressLine2 || '--'}}</div>
                                    </FormItem>
                                    <!-- <FormItem label="详细地址3" >
                                        <div >{{fromData.receiverAddressLine3 || '--'}}</div>
                                    </FormItem> -->
                                </Form>
                            </div>
                        </Col>
                    </Row>
                </Col>
                <Col span="8" style="padding-left:8px">
                    <div class="newbase-box" style="height:469px;overflow:auto">
                        <div class="newbase-title">跟踪信息</div>
                        <div class="padding-15">
                            <Timeline v-if="detailList.length>0">
                                <TimelineItem v-for="(item,index) in detailList" :key="index"><div>{{item.city||'--'}},{{item.state||'--'}},{{item.country||'--'}},{{item.status||'--'}},{{item.statusDetail||'--'}}</div>
                                <div>{{item.datetime||'--'}}</div></TimelineItem>
                            </Timeline>
                            <div v-else class="text-center">暂无数据...</div>
                        </div>
                    </div>
                    <div class="newbase-box margin-top-15">
                        <div class="newbase-title">参考选项</div>
                        <Form class="clearfix padding-right-15" ref="parcel" :model="parcelData" :label-width="160">
                            <FormItem label="Reference" >
                                <div>{{itemApiResponse.reference}}</div>
                            </FormItem>
                            <FormItem label="PO" >
                                <div>{{itemApiResponse.po}}</div>
                            </FormItem>
                            <FormItem label="Invoice" >
                                <div>{{itemApiResponse.invoice}}</div>
                            </FormItem>
                            <FormItem label="Department" >
                                <div>{{itemApiResponse.department}}</div>
                            </FormItem>

                        </Form>
                    </div>
                </Col>
            </Row>
            <Row v-if="pickUpData.pickupNumber">
                <Col span="24" >
                    <div class="newbase-box margin-top-15">
                        <div class="newbase-title">取件信息</div>
                        <div>
                            <Form class="clearfix padding-right-15 margin-top-5" :label-width="160"  ref='pickUpData' :model='pickUpData'>
                                <Row>
                                    <Col>
                                        <FormItem label="取件日期:" >
                                            <div>{{pickUpData.readyTime.split(' ')[0]}}</div>
                                        </FormItem>
                                    </Col>
                                    <Col>
                                        <FormItem label="取件时间:" >
                                            <div>{{pickUpData.readyTime.split(' ')[1]}}~{{ pickUpData.closeTime.split(' ')[1] }}</div>
                                        </FormItem>
                                    </Col>
                                    <Col>
                                        <FormItem label="取件码:" >
                                            <div>{{pickUpData.pickupNumber}}</div>
                                        </FormItem>
                                    </Col>
                                </Row>
                            </Form>
                        </div>
                    </div>
                </Col>
            </Row>
        </div>


        <Modal
        class="hidefooter"
		v-model='operate.show'
		:mask-closable='false'
		v-bind="operate">
			<component v-if="operate.show" :is="operate.component" @on-close="operate={}" v-on="operate.on" v-bind="operate"/>
			<footer slot="footer" v-show="operate.footer"></footer>
		</Modal>
        <div class="text-right margin-top-10" v-if="querytype!='query'">
            <Button type="primary" @click="goback">返回</Button>
        </div>
        <Spin v-if="loading" fix></Spin>
    </div>
</template>

<script>
import {
    HttpGetLabelManageOne,
	HttpPrintWaybill,
} from '@/service/api/views';
import { FSAPI } from '@/utils/assist';
import { mapState, mapGetters } from "vuex";
import compapiDetail from '../apidetail.vue'
import compsoUpload from "@components/templates/selectupload";
export default {
    props:['actived','trackDetail','querytype'],
    components:{
        compapiDetail,
        compsoUpload,
    },
    data(){
        return {
            id: this.$route.params.id || this.actived,
            trackDetail: this.$route.query.trackDetail || this.trackDetail,
            pickUpData: {},
            fromData:{},
            operate: {
                id: null,
                title: "",
                show: false,
                component: null
            },
            itemApiResponse:{},
            detailList:[],
            loading: false,
        }
    },
    created(){
        this.getDetail()
        this.detailList = JSON.parse(this.trackDetail || null) || []
    },
    computed: {
       ...mapGetters('dictionary', ['getSysAllList']),
    },
    methods:{
        importExcel(){
            this.operate = {
                show: true,
                title: "上传附件",
                width: '460',
                actionurl: process.env.VUE_APP_APIURL_SHIP+"/api/jwt/spl/shippinginfo/attachmentUpload",
                name: "multipartFile",
                component: "compsoUpload",
                showdownload:1,
                id:this.id,
                formdata: [
                    {
                        label: '运单号',
                        tag: "Input",
                        key:'trackingCode',
                        labelWidth: 90,
                        span:24,
                        formItem:{
                            style:'width:100%',
                        }
                    },
                ],
                on:{
                    "on-update":()=>{
                        this.getDetail()
                    }
                }
            }
        },
        queryApi(){
            // console.log(this.fromData.apiRequest)
            this.operate = {
                show: true,
                apiRequest: this.fromData.apiRequest,
                apiResponse:this.fromData.apiResponse,
                title: "查看API",
                component: "compapiDetail",
                width: '1100',
                footer: false
            }
        },
        queryRate(){
            this.operate = {
                show: true,
                apiRequest: this.fromData.rateInfo.apiRequest,
                apiResponse:this.fromData.rateInfo.apiResponse,
                title: "查看API",
                component: "compapiDetail",
                width: '1100',
                footer: false
            }
        },
        getOrgName(orgid){
            let oneorg = this.getSysAllList.filter(item=>{ return item.value === orgid }) [0] || {}
            return oneorg.label
        },
        getStatus(val){
            let type = null;
            switch (val) {
                case 0: type = "已创建"; break;
                case 1: type = "已获取"; break;
                case 2: type = "已打印"; break;
                case 4: type = "已扣款"; break;
                case 5: type = "已计费"; break;
                default: type = "已创建"; break;
            }
            return type;
        },
        getTrackingStatus(val){
            let type = null;
            switch (val) {
                case 'unknown': type = "初始化"; break;
                case 'pre_transit': type = "待发运"; break;
                case 'in_transit': type = "在途"; break;
                case 'out_for_delivery': type = "派送中"; break;
                case 'available_for_pickup': type = "派送中"; break;
                case 'delivered': type = "已妥投"; break;
                case 'return_to_sender': type = "已退回"; break;
                case 'cancelled': type = "已取消"; break;
                case 'failure': type = "异常"; break;
                case 'error': type = "异常"; break;
            }
            return type;
        },
        getDetail(){
            this.loading = true;
            HttpGetLabelManageOne({
                id:this.id,
            }).then(res=>{
                this.loading = false;
                this.fromData = res.data
                this.itemApiResponse = res.data;
                this.pickUpData = res.data.pickup || {};
            },err=>{
                this.loading = false;
                this.$Message.error(err.message || 'error');
            })
        },
        async printWaybill() {
			this.$Message.warning({
				content: '正在打印处理中，请稍后。',
				duration: 0
			})
			const response = await HttpPrintWaybill({ ids: this.id },{responseType: "blob" }).catch(error => {
				this.$Message.destroy();
				this.$Message.error(error.message || 'error');
			});
			if (response) {
				const blob = new Blob([response], {type:'application/pdf'});
				FSAPI.printPage(blob,'blob');
				this.$Message.destroy();
			}
        },
        async printWayInvoce() {
			this.$Message.warning({
				content: '正在打印处理中，请稍后。',
				duration: 0
			})
            const response = await HttpPrintWaybill({ ids: this.id,type:'invo' },{responseType: "blob" }).catch(error => {
				this.$Message.destroy();
				this.$Message.error(error.message || 'error');
			});
			if (response) {
				const blob = new Blob([response], {type:'application/pdf'});
				FSAPI.printPage(blob,'blob');
				this.$Message.destroy();
			}
		},
        goback(){
            this.$router.push({ name:'labelManage' });
        }
    },
}
</script>
